<template>
  <div class="register">
    <div class="regbox">
      <div class="reg-title">
        <h2>商标注册申请</h2>
      </div>
      <div class="reg-form">
        <el-form
          :model="ruleForm"
          ref="ruleForm"
          label-width="200px"
          class="demo-ruleForm"
        >
          <el-form-item label="申请人姓名：">
            <el-input v-model="ruleForm.name_id" disabled></el-input>
          </el-form-item>
          <el-form-item label="代理机构名称：">
            <el-input v-model="ruleForm.agency" disabled placeholder="成都商标受理窗口"></el-input>
          </el-form-item>
          <el-form-item label="外国申请人的国内接收人：">
            <el-input v-model="ruleForm.recipient" placeholder="外国申请人的国内接收人"></el-input>
          </el-form-item>
          <el-form-item label="国内接收地址：">
            <el-input v-model="ruleForm.recipient_addr" placeholder="国内接收地址"></el-input>
          </el-form-item>
          <el-form-item label="邮政编码：">
            <el-input v-model="ruleForm.code_postal" placeholder="邮政编码"></el-input>
          </el-form-item>
          <el-form-item label="商标省请声明：">
            <el-radio-group v-model="ruleForm.mark_app">
              <el-radio label="普通商标"></el-radio>
              <el-radio label="集体商标"></el-radio>
              <el-radio label="证明商标"></el-radio>
            </el-radio-group>
            <!-- <el-checkbox-group v-model="ruleForm.type">
              <el-checkbox label="以三维标志申请商标注册" name="type"></el-checkbox>
              <el-checkbox label="以颜色组合申请商标注册" name="type"></el-checkbox>
              <el-checkbox label="以声音标志申请商标注册" name="type"></el-checkbox>
              <el-checkbox label="两个以上申请人共同申请注册同一商标" name="type"></el-checkbox>
            </el-checkbox-group>-->
          </el-form-item>
          <el-form-item label="申请展出国家/地区：">
            <el-input v-model="ruleForm.country_region" placeholder="申请展出国家/地区"></el-input>
          </el-form-item>
          <el-form-item label="申请/展出日期：">
            <el-date-picker v-model="ruleForm.date" type="date" placeholder="申请/展出日期"></el-date-picker>
          </el-form-item>
          <el-form-item label="申请号：">
            <el-input v-model="ruleForm.application" placeholder="申请号"></el-input>
          </el-form-item>
          <el-form-item label="商标图样" required>
            <el-button type="success" @click="explain = true">选择图片</el-button>
            <div class="img-box">
              <el-image
                v-for="(item,index) in explainimg"
                :key="index"
                style="width: 100px; height: 100px;margin: 3px; "
                :src="item.url"
                fit="cover"
                :preview-src-list="RxplainPreList"
              ></el-image>
            </div>
            <div class="logo-txt">左框为商标图样粘贴处。图样应当不大于10×10cm，不小于5×5cm。 以颜色组合或者着色图样申请商标注册的，应当提交着色图样并提交黑白稿1份；不指定颜色的，应当提交黑白图样。 以三维标志申请商标注册的，应当提交能够确定三维形状的图样，提交的商标图样应当至少包含三面视图。 以声音标志申请商标注册的，应当以五线谱或者简谱对申请用作商标的声音加以描述并附加文字说明； 无法以五线谱或者简谱描述的，应当使用文字进行描述；商标描述与声音样本应当一致。</div>
          </el-form-item>
          <el-form-item label="商标说明：">
            <el-input type="textarea" v-model="ruleForm.mark_desc" :autosize="{ minRows: 5}"></el-input>
          </el-form-item>
          <el-form-item label="商品/服务项：">
            <el-input type="textarea" v-model="ruleForm.project" :autosize="{ minRows: 5}" disabled></el-input>
          </el-form-item>
          <base-upload @getFile="getFile"></base-upload>
        </el-form>
      </div>
      <div class="r-f-sutbox">
        <button class="r-f-sut" @click="subForm">提交</button>
      </div>
    </div>
    <!-- 选择图片 -->
    <!-- 商标图样 -->
    <el-dialog title="提示" :visible.sync="explain" center>
      <span>需要注意的是内容是默认不居中的</span>
      <el-upload
        action="#"
        list-type="picture-card"
        :auto-upload="false"
        :file-list="explainimg"
        :on-change="changeRxplain"
        :limit="10"
        :on-exceed="exceesLimitRxplain"
        multiple
        drap
      >
        <div slot="tip" class="el-upload__tip">只能上传jpg/png文件，且不超过500kb</div>
        <i slot="default" class="el-icon-plus"></i>
        <div slot="file" slot-scope="{file}">
          <img class="el-upload-list__item-thumbnail" :src="file.url" alt />
          <span class="el-upload-list__item-actions">
            <span class="el-upload-list__item-delete" @click="removeRxplain(file)">
              <i class="el-icon-delete"></i>
            </span>
          </span>
        </div>
      </el-upload>
      <span slot="footer" class="dialog-footer">
        <el-button @click="explain = false">取 消</el-button>
        <el-button type="primary" @click="explain = false">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import BaseUpload from "@/components/base-component/BaseUpload";
export default {
  name: "register",
  data() {
    return {
      ruleForm: {
        agency: "",
        categroy: "",
        code_postal: "",
        confirmImgs: [],
        confirm_upload: "",
        country_region: "",
        date: "",
        docImgs: [],
        documentation: [],
        logo: [],
        mark_app: "普通商标",
        mark_desc: "",
        name_id: 1,
        project: "",
        recipient: "",
        recipient_addr: ""
      },
      // 删除图片按钮
      disabled: false,
      // 商标图样对话框
      explain: false,
      // 商标图样图片
      explainimg: [],
      formData: new FormData()
    };
  },
  components: {
    BaseUpload
  },
  methods: {
    getFile(data, data2) {
      console.log(this.ruleForm.date);
      this.ruleForm.confirmImgs = data2;
      this.ruleForm.docImgs = data;
    },
    subForm() {
      this.ruleForm.logo.forEach(item => {
        this.formData.append("log", item.raw);
      });
      var config = {
        header: {
          "Content-Type": "multipart/form-data"
        }
      };
      this.ruleForm.confirmImgs.forEach(itemone => {
        this.formData.append("confirmImgs", itemone);
      });
      this.ruleForm.docImgs.forEach(itemtwo => {
        this.formData.append("docImgs", itemtwo);
      });
      this.formData.append("agency", this.ruleForm.agency);
      this.formData.append("categroy", this.ruleForm.categroy);
      this.formData.append("code_postal", this.ruleForm.code_postal);
      this.formData.append("confirm_upload", this.ruleForm.confirm_upload);
      this.formData.append("country_region", this.ruleForm.country_region);
      this.formData.append("date", this.ruleForm.date);
      this.formData.append("documentation", this.ruleForm.documentation);
      this.formData.append("mark_app", this.ruleForm.mark_app);
      this.formData.append("mark_desc", this.ruleForm.mark_desc);
      this.formData.append("name_id", this.ruleForm.name_id);
      this.formData.append("project", this.ruleForm.project);
      this.formData.append("recipient", this.ruleForm.recipient);
      this.formData.append("recipient_addr", this.ruleForm.recipient_addr);

      this.$http
        .post(
          "http://192.168.0.102:8080/proTRegMark/update",
          this.formData,
          config
        )
        .then(function(response) {
          console.log(response);
        })
        .catch(function(error) {
          console.log(error);
        });
    },
    // 商标图样
    changeRxplain(file, fileList) {
      // console.log(fileList)
      this.explainimg.push({ name: file.name, url: file.url, id: file.uid });
      this.ruleForm.logo = fileList;
    },
    // 商标图样删除
    removeRxplain(file) {
      const index = this.explainimg.findIndex(el => el.uid === file.uid);
      index !== -1 && this.explainimg.splice(index, 1);
    },
    // 商标图样图片数量超出限制
    exceesLimitRxplain() {
      alert("图片数量超出限制");
    }
  },
  computed: {
    // 商标图样预览数组
    RxplainPreList() {
      return this.explainimg.map(el => {
        return el.url;
      });
    }
  }
};
</script>

<style scoped lang="less">
i,
em {
  font-style: normal;
}
.register {
  width: 100%;
  background-color: #e7e8eb;
  .regbox {
    width: 1240px;
    margin: 0 auto;
    background-color: #fff;
    padding: 20px;
    .reg-title {
      padding: 15px 20px;
      text-align: center;
      border-bottom: 1px solid #e7e8eb;
      h2 {
        font-size: 22px;
        font-weight: 300;
      }
    }
    .reg-form {
      width: 700px;
      .el-form-item {
        margin-top: 50px;
        position: relative;
        .el-radio {
          display: block;
          margin-bottom: 10px;
        }
        .el-checkbox {
          display: block;
        }
        .logo-txt{
          width: 375px;
          position: absolute;
          right: -400px;
          top: 0;
          font-size: 12px;
          line-height: 2;
          color: #252424;
        }
      }
    }
    .r-f-sutbox {
      margin-top: 50px;
      text-align: center;
      .r-f-sut {
        padding: 12px 20px;
        color: #fff;
        border: none;
        outline: none;
        border-radius: 5px;
        cursor: pointer;
        background-color: #67c23a;
      }
    }
  }
}
</style>
